<!DOCTYPE html>
<html>
<head>
	<title>物流时效查询 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.efficiency-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-header {
			margin-bottom: 20px;
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.search-section {
			margin-bottom: 20px;
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.stats-overview {
			margin-bottom: 20px;
		}
		.stat-card {
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			text-align: center;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}
		.stat-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0,0,0,0.15);
		}
		.stat-card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, #409EFF, #67C23A);
		}
		.stat-icon {
			font-size: 36px;
			margin-bottom: 10px;
		}
		.stat-number {
			font-size: 28px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.stat-trend {
			font-size: 12px;
			margin-top: 5px;
		}
		.trend-up {
			color: #67C23A;
		}
		.trend-down {
			color: #F56C6C;
		}
		.routes-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			padding: 20px;
			margin-bottom: 20px;
		}
		.route-item {
			padding: 20px;
			margin-bottom: 15px;
			border: 2px solid #f0f0f0;
			border-radius: 12px;
			transition: all 0.3s ease;
			background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
		}
		.route-item:hover {
			border-color: #409EFF;
			box-shadow: 0 4px 15px rgba(64,158,255,0.2);
			transform: translateY(-2px);
		}
		.route-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
		}
		.route-name {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
		.route-distance {
			color: #666;
			font-size: 14px;
		}
		.efficiency-badge {
			padding: 6px 12px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: bold;
		}
		.efficiency-excellent {
			background: #e1f3d8;
			color: #67c23a;
		}
		.efficiency-good {
			background: #ecf5ff;
			color: #409eff;
		}
		.efficiency-average {
			background: #fdf6ec;
			color: #e6a23c;
		}
		.efficiency-poor {
			background: #fef0f0;
			color: #f56c6c;
		}
		.route-details {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
			margin-bottom: 15px;
		}
		.detail-item {
			padding: 12px;
			background: rgba(255,255,255,0.8);
			border-radius: 8px;
			border: 1px solid #f0f0f0;
		}
		.detail-label {
			font-size: 12px;
			color: #909399;
			margin-bottom: 5px;
		}
		.detail-value {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
		.suppliers-list {
			margin-top: 15px;
		}
		.supplier-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px;
			margin-bottom: 8px;
			background: rgba(255,255,255,0.6);
			border-radius: 8px;
			border: 1px solid #f0f0f0;
		}
		.supplier-name {
			font-weight: bold;
			color: #333;
		}
		.supplier-efficiency {
			font-size: 14px;
			color: #666;
		}
		.supplier-rating {
			color: #E6A23C;
		}
		.chart-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			padding: 20px;
			margin-bottom: 20px;
		}
		.chart-container {
			height: 400px;
			border-radius: 8px;
			width: 100%;
		}
		.filter-tags {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
			margin-top: 15px;
		}
		.filter-tag {
			padding: 8px 16px;
			border-radius: 20px;
			border: 2px solid #e4e7ed;
			background: #fff;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 14px;
		}
		.filter-tag:hover {
			border-color: #409EFF;
			color: #409EFF;
		}
		.filter-tag.active {
			background: #409EFF;
			color: white;
			border-color: #409EFF;
		}
		.comparison-table {
			margin-top: 20px;
		}
		.refresh-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			z-index: 1000;
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="efficiency-container">
			<!-- 页面标题 -->
			<div class="page-header">
				<h2 style="margin: 0 0 15px 0; color: #333;">📊 物流时效查询分析</h2>
				<p style="margin: 0; color: #666;">查询分析不同线路和服务商的运输时效，优化物流配送效率</p>
			</div>

			<!-- 搜索筛选区域 -->
			<div class="search-section">
				<el-form :inline="true" :model="searchForm">
					<el-form-item label="起始城市">
						<el-select v-model="searchForm.startCity" placeholder="选择起始城市" style="width: 150px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="北京" value="beijing"></el-option>
							<el-option label="上海" value="shanghai"></el-option>
							<el-option label="广州" value="guangzhou"></el-option>
							<el-option label="深圳" value="shenzhen"></el-option>
							<el-option label="成都" value="chengdu"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="目标城市">
						<el-select v-model="searchForm.endCity" placeholder="选择目标城市" style="width: 150px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="北京" value="beijing"></el-option>
							<el-option label="上海" value="shanghai"></el-option>
							<el-option label="广州" value="guangzhou"></el-option>
							<el-option label="深圳" value="shenzhen"></el-option>
							<el-option label="重庆" value="chongqing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务商">
						<el-select v-model="searchForm.supplier" placeholder="选择服务商" style="width: 180px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="顺丰冷链" value="sf"></el-option>
							<el-option label="京东物流" value="jd"></el-option>
							<el-option label="菜鸟网络" value="cainiao"></el-option>
							<el-option label="德邦快递" value="deppon"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间范围">
						<el-date-picker
							v-model="searchForm.dateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							style="width: 240px;">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchRoutes">查询</el-button>
						<el-button @click="resetSearch">重置</el-button>
						<el-button type="success" @click="exportData">导出数据</el-button>
					</el-form-item>
				</el-form>

				<!-- 快速筛选标签 -->
				<div class="filter-tags">
					<div 
						v-for="tag in quickFilters" 
						:key="tag.key"
						:class="['filter-tag', {active: activeFilter === tag.key}]"
						@click="applyQuickFilter(tag.key)"
					>
						{{ tag.label }}
					</div>
				</div>
			</div>

			<!-- 统计概览 -->
			<el-row :gutter="20" class="stats-overview">
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-icon" style="color: #409EFF;">🚚</div>
						<div class="stat-number" style="color: #409EFF;">{{ stats.totalRoutes }}</div>
						<div class="stat-label">运输线路</div>
						<div class="stat-trend trend-up">↗ 较上月+5%</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-icon" style="color: #67C23A;">⏱️</div>
						<div class="stat-number" style="color: #67C23A;">{{ stats.avgEfficiency }}</div>
						<div class="stat-label">平均时效(小时)</div>
						<div class="stat-trend trend-down">↘ 较上月-8%</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-icon" style="color: #E6A23C;">📦</div>
						<div class="stat-number" style="color: #E6A23C;">{{ stats.totalOrders }}</div>
						<div class="stat-label">总订单数</div>
						<div class="stat-trend trend-up">↗ 较上月+12%</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-icon" style="color: #F56C6C;">⭐</div>
						<div class="stat-number" style="color: #F56C6C;">{{ stats.avgRating }}</div>
						<div class="stat-label">平均评分</div>
						<div class="stat-trend trend-up">↗ 较上月+0.2</div>
					</div>
				</el-col>
			</el-row>

			<!-- 时效趋势图表 -->
			<div class="chart-section">
				<h3 style="margin: 0 0 20px 0; color: #333;">📈 时效趋势分析</h3>
				<div id="efficiencyChart" class="chart-container"></div>
			</div>

			<!-- 线路时效列表 -->
			<div class="routes-section">
				<h3 style="margin: 0 0 20px 0; color: #333;">🛣️ 线路时效详情 ({{ filteredRoutes.length }})</h3>
				
				<div 
					v-for="route in filteredRoutes" 
					:key="route.id"
					class="route-item"
				>
					<div class="route-header">
						<div>
							<div class="route-name">{{ route.name }}</div>
							<div class="route-distance">{{ route.distance }} | {{ route.description }}</div>
						</div>
						<div :class="'efficiency-badge efficiency-' + route.efficiencyLevel">{{ route.efficiencyText }}</div>
					</div>
					
					<div class="route-details">
						<div class="detail-item">
							<div class="detail-label">平均时效</div>
							<div class="detail-value">{{ route.avgTime }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">最快时效</div>
							<div class="detail-value">{{ route.fastestTime }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">准时率</div>
							<div class="detail-value">{{ route.onTimeRate }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">月订单量</div>
							<div class="detail-value">{{ route.monthlyOrders }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">平均成本</div>
							<div class="detail-value">{{ route.avgCost }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">客户评分</div>
							<div class="detail-value supplier-rating">{{ route.rating }} ⭐</div>
						</div>
					</div>
					
					<div class="suppliers-list">
						<h4 style="margin: 0 0 10px 0; color: #333; font-size: 14px;">🏢 服务商时效对比</h4>
						<div 
							v-for="supplier in route.suppliers" 
							:key="supplier.name"
							class="supplier-item"
						>
							<div class="supplier-name">{{ supplier.name }}</div>
							<div class="supplier-efficiency">{{ supplier.avgTime }} | {{ supplier.cost }}</div>
							<div class="supplier-rating">{{ supplier.rating }} ⭐</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 对比分析表格 -->
			<div class="routes-section comparison-table">
				<h3 style="margin: 0 0 20px 0; color: #333;">📋 服务商对比分析</h3>
				<el-table :data="supplierComparison" stripe style="width: 100%">
					<el-table-column prop="name" label="服务商" width="150"></el-table-column>
					<el-table-column prop="routes" label="覆盖线路" width="100"></el-table-column>
					<el-table-column prop="avgTime" label="平均时效" width="120"></el-table-column>
					<el-table-column prop="onTimeRate" label="准时率" width="100"></el-table-column>
					<el-table-column prop="avgCost" label="平均成本" width="120"></el-table-column>
					<el-table-column prop="rating" label="客户评分" width="120"></el-table-column>
					<el-table-column prop="monthlyOrders" label="月订单量" width="120"></el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button size="mini" @click="viewSupplierDetail(scope.row)">详情</el-button>
							<el-button size="mini" type="primary" @click="contactSupplier(scope.row)">联系</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<!-- 刷新按钮 -->
		<el-button class="refresh-btn" type="primary" circle @click="refreshData">
			<i class="el-icon-refresh"></i>
		</el-button>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script src="../../static/kj/echarts-en.min.js"></script>
	<script>
		new Vue({
				el: '#app',
				mounted() {
					this.initChart();
				},
				data: {
				searchForm: {
					startCity: '',
					endCity: '',
					supplier: '',
					dateRange: []
				},
				activeFilter: '',
				quickFilters: [
					{key: 'hot', label: '🔥 热门线路'},
					{key: 'fast', label: '⚡ 最快时效'},
					{key: 'economic', label: '💰 经济实惠'},
					{key: 'reliable', label: '🎯 准时可靠'},
					{key: 'recent', label: '📅 近期数据'}
				],
				routes: [
					{
						id: 1,
						name: '北京 → 上海',
						distance: '1,318公里',
						description: '京沪高速主干线',
						avgTime: '18.5小时',
						fastestTime: '14.2小时',
						onTimeRate: '94.2%',
						monthlyOrders: '2,456单',
						avgCost: '¥285/吨',
						rating: '4.8',
						efficiencyLevel: 'excellent',
						efficiencyText: '优秀',
						suppliers: [
							{name: '顺丰冷链', avgTime: '16.8小时', cost: '¥320/吨', rating: '4.9'},
							{name: '京东物流', avgTime: '18.2小时', cost: '¥275/吨', rating: '4.7'},
							{name: '菜鸟网络', avgTime: '19.5小时', cost: '¥260/吨', rating: '4.6'}
						]
					},
					{
						id: 2,
						name: '广州 → 深圳',
						distance: '140公里',
						description: '珠三角核心线路',
						avgTime: '3.2小时',
						fastestTime: '2.5小时',
						onTimeRate: '96.8%',
						monthlyOrders: '4,123单',
						avgCost: '¥85/吨',
						rating: '4.9',
						efficiencyLevel: 'excellent',
						efficiencyText: '优秀',
						suppliers: [
							{name: '顺丰冷链', avgTime: '2.8小时', cost: '¥95/吨', rating: '4.9'},
							{name: '德邦快递', avgTime: '3.1小时', cost: '¥80/吨', rating: '4.8'},
							{name: '京东物流', avgTime: '3.5小时', cost: '¥85/吨', rating: '4.7'}
						]
					},
					{
						id: 3,
						name: '成都 → 重庆',
						distance: '308公里',
						description: '成渝经济圈',
						avgTime: '6.8小时',
						fastestTime: '5.2小时',
						onTimeRate: '91.5%',
						monthlyOrders: '1,789单',
						avgCost: '¥125/吨',
						rating: '4.5',
						efficiencyLevel: 'good',
						efficiencyText: '良好',
						suppliers: [
							{name: '京东物流', avgTime: '6.2小时', cost: '¥135/吨', rating: '4.6'},
							{name: '菜鸟网络', avgTime: '7.1小时', cost: '¥115/吨', rating: '4.4'},
							{name: '德邦快递', avgTime: '7.5小时', cost: '¥125/吨', rating: '4.5'}
						]
					},
					{
						id: 4,
						name: '上海 → 广州',
						distance: '1,213公里',
						description: '沪粤经济走廊',
						avgTime: '22.3小时',
						fastestTime: '18.5小时',
						onTimeRate: '88.7%',
						monthlyOrders: '1,567单',
						avgCost: '¥295/吨',
						rating: '4.3',
						efficiencyLevel: 'average',
						efficiencyText: '一般',
						suppliers: [
							{name: '顺丰冷链', avgTime: '20.1小时', cost: '¥325/吨', rating: '4.5'},
							{name: '菜鸟网络', avgTime: '23.2小时', cost: '¥275/吨', rating: '4.2'},
							{name: '德邦快递', avgTime: '24.5小时', cost: '¥285/吨', rating: '4.1'}
						]
					}
				],
				supplierComparison: [
					{
						name: '顺丰冷链',
						routes: '25条',
						avgTime: '16.2小时',
						onTimeRate: '95.8%',
						avgCost: '¥298/吨',
						rating: '4.8 ⭐',
						monthlyOrders: '8,456单'
					},
					{
						name: '京东物流',
						routes: '32条',
						avgTime: '18.5小时',
						onTimeRate: '93.2%',
						avgCost: '¥265/吨',
						rating: '4.6 ⭐',
						monthlyOrders: '12,345单'
					},
					{
						name: '菜鸟网络',
						routes: '28条',
						avgTime: '20.1小时',
						onTimeRate: '91.5%',
						avgCost: '¥245/吨',
						rating: '4.4 ⭐',
						monthlyOrders: '9,876单'
					},
					{
						name: '德邦快递',
						routes: '18条',
						avgTime: '19.8小时',
						onTimeRate: '89.3%',
						avgCost: '¥255/吨',
						rating: '4.3 ⭐',
						monthlyOrders: '6,234单'
					}
				]
			},
			computed: {
				filteredRoutes() {
					return this.routes; // 这里可以添加筛选逻辑
				},
				stats() {
					return {
						totalRoutes: this.routes.length,
						avgEfficiency: '18.2',
						totalOrders: '9,935',
						avgRating: '4.6'
					};
				}
			},
			methods: {
				searchRoutes() {
					this.$message.success(`查询完成，找到 ${this.filteredRoutes.length} 条线路`);
				},
				resetSearch() {
					this.searchForm = {
						startCity: '',
						endCity: '',
						supplier: '',
						dateRange: []
					};
					this.activeFilter = '';
				},
				applyQuickFilter(key) {
					this.activeFilter = key;
					this.$message.info(`应用筛选: ${this.quickFilters.find(f => f.key === key).label}`);
				},
				exportData() {
					this.$message.success('数据导出功能开发中...');
				},
				refreshData() {
					this.$message.info('正在刷新数据...');
					setTimeout(() => {
						this.$message.success('数据已更新');
					}, 1000);
				},
				viewSupplierDetail(supplier) {
					this.$message.info(`查看 ${supplier.name} 详细信息`);
				},
				contactSupplier(supplier) {
						this.$message.info(`联系 ${supplier.name}`);
					},
					initChart() {
						const chart = echarts.init(document.getElementById('efficiencyChart'));
						const option = {
							title: {
								text: '近30天时效趋势',
								left: 'center',
								textStyle: {
									color: '#333',
									fontSize: 16
								}
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross'
								}
							},
							legend: {
								data: ['顺丰冷链', '京东物流', '菜鸟网络', '德邦快递'],
								top: '10%'
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								top: '20%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: ['1月1日', '1月3日', '1月5日', '1月7日', '1月9日', '1月11日', '1月13日', '1月15日', '1月17日', '1月19日', '1月21日', '1月23日', '1月25日', '1月27日', '1月29日']
							},
							yAxis: {
								type: 'value',
								name: '时效(小时)',
								min: 10,
								max: 30
							},
							series: [
								{
									name: '顺丰冷链',
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#409EFF',
										width: 3
									},
									itemStyle: {
										color: '#409EFF'
									},
									data: [16.2, 15.8, 16.5, 15.9, 16.1, 15.7, 16.3, 15.5, 16.0, 15.8, 16.2, 15.6, 16.4, 15.9, 16.1]
								},
								{
									name: '京东物流',
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#67C23A',
										width: 3
									},
									itemStyle: {
										color: '#67C23A'
									},
									data: [18.1, 17.9, 18.3, 18.0, 18.2, 17.8, 18.4, 17.6, 18.1, 17.9, 18.3, 17.7, 18.5, 18.0, 18.2]
								},
								{
									name: '菜鸟网络',
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#E6A23C',
										width: 3
									},
									itemStyle: {
										color: '#E6A23C'
									},
									data: [19.8, 20.1, 19.5, 20.3, 19.9, 20.0, 19.7, 20.2, 19.8, 20.1, 19.6, 20.4, 19.9, 20.0, 19.8]
								},
								{
									name: '德邦快递',
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#F56C6C',
										width: 3
									},
									itemStyle: {
										color: '#F56C6C'
									},
									data: [19.5, 19.8, 19.2, 20.0, 19.6, 19.9, 19.3, 20.1, 19.5, 19.8, 19.4, 20.2, 19.7, 19.9, 19.6]
								}
							]
						};
						chart.setOption(option);
						
						// 响应式调整
						window.addEventListener('resize', () => {
							chart.resize();
						});
					}
				}
			});
	</script>
</body>
</html>